Failed: [pcf-1011] [Error] Resource file ...\PCFfolder\css\semanticUI.css not found.

[DavidPezzoli]

Hi Michael, I read your article and I followed step-by-step your procedure. My goal is reference all the semantic.css library in my PCF by Sass as suggested by Microsoft.

Here the details, in "PCFfolder" I added: "index.ts" "SemanticControl.tsx" "ControlManifest.Input.xml" (with the line: <css path="css/semanticUI.css" order="1"/>) and a subfolder: css with a file: "semanticUI.scss"

The "semanticUI.scss" contains the one import line:

#pcf-semantic-control {
    @import '../../node_modules/semantic-ui-css/semantic.css';
}

After npm installation of "pcf-sass-loader", I modified the /node_modules/pcf-scripts/webpackconfig.js like this:

exports.generateStub = generateStub;
function getWebpackConfig(control, controlOutputDir, buildMode, watchFlag) {
    const entryPoint = path.resolve(control.getControlPath(), control.getCodeRelativePath());
    let customConfig = {};
    const customConfigPath = path.resolve(control.getControlPath(), '..', constants.WEBPACK_CUSTOMIZATION_FILE_NAME);
    const featureMgr = new featureManager_1.FeatureManager();
    if (featureMgr.isFeatureEnabled('pcfAllowCustomWebpack') && fs.existsSync(customConfigPath)) {
        customConfig = require(customConfigPath);
    }
    const oobConfig = {
        // `production` mode will minify, while `development` will optimize for debugging.
        mode: buildMode,
        watch: watchFlag,
        watchOptions: {
            aggregateTimeout: 500
        },
        // Tells webpack where to start walking the graph of dependencies
        entry: entryPoint,
        output: {
            // This library value control what global variable the output control is placed in.
            library: constants.TEMP_NAMESPACE,
            pathinfo: true,
            filename: constants.BUNDLE_NAME,
            path: controlOutputDir
        },
        resolve: {
            // Tell webpack which extensions to try when it is looking for a file.
            extensions: ['.ts', '.tsx', '.js', '.jsx'],
            plugins: [new awesome_typescript_loader_1.TsConfigPathsPlugin()]
        },
        module: {
            rules: [
                {
                    // Tells webpack how to load files with TS or TSX extensions.
                    test: /\.(ts|tsx)$/,
                    use: [
                        babelLoader,
                        {
                            loader: require.resolve('ts-loader')
                        }
                    ],
                    exclude: /node_modules/
                },
                {
                    // Tell webpack how to handle JS or JSX files
                    test: /\.(js|jsx)$/,
                    use: [babelLoader]
                },
                // Here My Update based on: https://powerusers.microsoft.com/t5/News-Announcements/Using-SASS-on-your-PCF-Project/ba-p/614222
                {
                    test: /\.scss$/, //find per files that is sass
                    use: [
                        {
                            loader: require.resolve('file-loader'),
                            options: {
                                name: '[folder]/[name].css' // create the compiled file in the same location that is configured in the project
                            }
                        },
                        {
                            loader: require.resolve("pcf-sass-loader"),
                        },
                        {
                            loader: require.resolve('extract-loader')
                        }, 
                        {
                            loader: require.resolve('css-loader'),
                            options: 
                            {
                                url: true
                            }
                        }, 
                        {
                            loader: require.resolve('postcss-loader')
                        }, 
                        {
                            loader: require.resolve('sass-loader')
                        }
                    ]
                }
            ]
        }
    };
    const mergedConfig = Object.assign(Object.assign({}, customConfig), oobConfig);
    if (customConfig.output) {
        Object.assign(mergedConfig.output, customConfig.output);
    }
    return mergedConfig;
}

When i prompt npm run build from the PCFfolder path, for my opinion the webpack pcf-sass-loader can't find the "semanticUI.scss" and are not able to convert it to .css file..... PCF CLI give me a red error message: Failed: [pcf-1011] [Error] Resource file ...\PCFfolder\css\semanticUI.css not found. and I can't test my PCF Control.

So, I think, is your procedure right? Because I don't know where I'm wrong.... and on Web there aren't other solutions for Sass preprocessor in PCF.

Thanks!

[michaelfp]

Hi! Sorry for the delay in answer. Could share a print of your folder structure?

[DavidPezzoli]

[michaelfp]

Hi can you share your manifest file and The build log?

[hvu-hsl]

Hi! I got the same error, that the css file could not be found, so I created an empty file with that name in that location and am able to successfully build but nothing gets generated in the css file.

Here's my manifest:

Folder structure:

The error I was getting before I added the file:

[limyandi]

Hi @hvu-hsl , isn't your file named scss instead of css?

[hvu-hsl]

Hi @hvu-hsl , isn't your file named scss instead of css?

What do you mean? Yes, I have an scss file and a css file of the same name is supposed to be generated but it's not.