How to upload js and css files to sharepoint using visual studio.

We can upload js and css files to SharePoint using Module via visual studio.

1] Firstly will create folder (let’s say “CMR”) under style library.

2] Then will add module to our visual studio project.

3] Provide name to module. Let’s say commonCSS , commonJS.

4] Rename .txt file with .js or .css  . If you want to add more then one js and css file to module so right click on moduleà add new item à select general tabà and select text file. So that later we can change its extension.

5] Then will have to modify element.xml file of module like below

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

  <Module Name="CommonCSS" Url="Style Library">

    <File Path="CommonCSS\style.css" Url="CMR/CommonCSS/style.css" Type="GhostableInLibrary" />

    <File Path="CommonCSS\custom-style.css" Url="CMR/CommonCSS/custom-style.css" Type="GhostableInLibrary"/>

    <File Path="CommonCSS\bootstrap.css" Url="CMR/CommonCSS/bootstrap.css" Type="GhostableInLibrary"/>
    <File Path="CommonCSS\editUserValidation.js" Url="CMR/CommonCSS/editUserValidation.js" Type="GhostableInLibrary"/>

  </Module>

</Elements>

When you deploy solution so respective file will be placed at provided path which mentioned in element.xml file of module.

Then on .aspx / .ascx page will refer these css and js file like below

    <script src="../../../Style%20Library/CMR/CommonJS/editUserValidation.js" type="text/javascript"></script>
    <link href="../../../Style%20Library/CMR/CommonCSS/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="../../../Style%20Library/CMR/CommonCSS/fonts.css" rel="stylesheet" type="text/css" />
    <link href="../../../Style%20Library/CMR/CommonCSS/style.css" rel="stylesheet" type="text/css" />